<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Lazy Line Painter</title>
        <meta name="description" content="A JS library for SVG path animation">

        <link rel="icon" type="image/x-icon" href="/favicon.ico" />

        <!-- css  -->
        <link rel="stylesheet" type="text/css" href="css/common.css" media="all">

        <!-- Include lazylinepainter -->
		<script src="../lib/lazy-line-painter-1.9.6.js"></script>

        <script type="text/javascript">
			
			(function(){ 
				
				document.onreadystatechange = () => {

		            if (document.readyState === 'complete') {
 
						let range = document.getElementById('input-range'); 
						let target = 0.5;
						let position = 0.5;
						let friction = 0.05;
 
						let el = document.querySelector('#logo');
						let myAnimation = new LazyLinePainter(el, { 
							strokeWidth: 7,
							strokeCap :'round',
							strokeColor : '#b5287b', 
							ease: 'easeInOutQuad'
						}); 

						/**
			        	 * Setup range input
			        	 */
						range.addEventListener("input", function(){
							target = this.value;
						});

						function step() {
							window.requestAnimationFrame(step);
							position += (target - position) * friction;
							myAnimation.set('progress', position);
						}

						window.requestAnimationFrame(step);
			 		}
		        } 
			})();

		</script>

    </head>

    <body>

    	<div class="content">
	        <div class="logo-wrap">
		    	<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 230" data-llp-composed="true"><style>.a{fill:none;}</style><path d="M64 38.3c0 0 18-21.3 4-28.7S41.8 18 38.7 51c-3.7 39-27 56.6-33 43.7 -0.9-7.8 8.3-11.3 22.7 1.7 19 16 37.3-13.3 42-19C75 71.7 93.7 60.7 89 57S60.7 82.2 75.3 90.7c6.1 2.9 22-10.7 27-32 0 0-14.7 29.7-7 29.7 11.7 0 27.3-37.7 37.7-36.3 10.3 1.3 15.3 22-10 26.7 9 16.7-7 37.3-14.7 30.3 -7.5-6.8 40-17 57.7-61.7 0 0-15 28.7-4.7 31.7 10.3 3 29.7-30.3 27-34 -2.7-3.7-6.3 1.9-9 16 -2.9 15.1-5 43-23.7 43 -5.3 0 1-7.5 7.2-11.6 7.5-4.9 16.5-8.7 28.2-23.1" data-llp-id="logo-0" data-llp-duration="3000" class="a" stroke-width="100"  /><path d="M242 67.3c0 0 14.7-15.7 6.7-25.3 -8-9.7-27.3-7.7-29.3 17.1 -2 24.9-7.7 67.6-32.3 66.9 -11.3-0.3-4.6-16.1 16.7-1 23 16.3 46.3-18 51.3-36.3 0 0-10.3 33 0 32.7 10.3-0.3 26-38.9 26-38.9s-2.3 27.2-7.3 35.9c8-17 19.3-39.1 27-35.9 7.7 3.2-17.7 28.2-5.7 32.2 0 0 11.7 0.7 21.7-18.3" data-llp-id="logo-1" data-llp-duration="1500" data-llp-delay="3000" class="a"/><path d="M319.7 96.7c0 0 21.3-5.2 19-17 -2.3-12-34.3 17.9-17 30.7 7 5.2 21.7-3.4 23-10.4" data-llp-id="logo-2" data-llp-duration="100" data-llp-delay="4500" class="a"/><path d="M260.2 75.3c-1 0-1.8-0.8-1.8-1.8 0-1 0.8-2.8 1.8-2.8s1.8 0.8 1.8 1.8c0 1-0.8 1.8-1.8 1.8" data-llp-id="logo-3" data-llp-duration="600" data-llp-delay="4500" class="a"/><path d="M77.7 134.7c0 0 5 19.7 1.5 48.4 -2.3 20.6-9.9 40.9-15.5 40.9 -12 0 25.3-102 63.7-92 13.3 3.7 14 49.7-29.7 56.7 -8.3 1.3-7.4-6 0-5.7 0 0 13.7-1.3 28.7 7" data-llp-id="logo-4" data-llp-duration="600" data-llp-delay="5100" class="a"/><path d="M126.7 204.3c0 0 16.3-18.7 27.7-24.7s0.3-6-3.7-2.5c-1.7 1.5-7.1 6.2-10.4 11.6 -4.3 7.2-5.6 15.8 2.7 20.5 14.7 8.3 24.3-27.4 25-32.2 -7.3 21.2-9 38.8 7.7 18.5l15.3-27.3c0 0-11.7 34-1 34 8.7 0 22.7-24 26.3-36" data-llp-id="logo-5" data-llp-duration="600" data-llp-delay="5700" class="a"/><path d="M215.9 167.6c0 0-2.9 21-5.9 31 7-15.7 22.3-37 25-32.3 2.7 4.7-15.7 27.7-2.3 30.3 13.3 2.7 32.7-49 34-59.3 -5.3 23.7-17.4 54.1-4.5 55.7 6.9 0.8 18.7-12.7 21-19.2" data-llp-id="logo-6" data-llp-duration="600" data-llp-delay="6600" class="a"/><path d="M191 154.3c0 0 4 2 6-2.3 2-4.3-3-6.7-6-4.7C188 149.3 191 154.3 191 154.3z" data-llp-id="logo-7" data-llp-duration="600" data-llp-delay="7200" class="a"/><path d="M249.1 162c0 0 13.2-0.7 18.2-2 5-1.3 6.7-1 6.7-1" data-llp-id="logo-8" data-llp-duration="300" data-llp-delay="7800" class="a"/><path d="M283.7 175.7c0 0 16.3-4 20.7-13.7 4.3-9.7-8-7.1-13.3-1 -5.3 6-16 24-2 27.5 15.7 5.5 33-23.1 33-36.9 0-5.6-6.4-4.9-6.4 0.8 0 5.5 3.1 4.3 9.8 4.3 6.7 0 11.3 5.3 6.3 10.7s-10.8 12.5-3.3 16.7c8 4.5 12-9 12-9" data-llp-id="logo-9" data-llp-duration="3000" data-llp-delay="7800" class="a"/><path d="M67 35.3c0 0 18-21.3 4-28.7S44.8 15 41.7 48c-3.7 39-27 56.6-33 43.7 -0.9-7.8 8.3-11.3 22.7 1.7 19 16 37.3-13.3 42-19C78 68.7 96.7 57.7 92 54S63.7 79.2 78.3 87.7c6.1 2.9 22-10.7 27-32 0 0-14.7 29.7-7 29.7 11.7 0 27.3-37.7 37.7-36.3 10.3 1.3 15.3 22-10 26.7 9 16.7-7 37.3-14.7 30.3 -7.5-6.8 40-17 57.7-61.7 0 0-15 28.7-4.7 31.7 10.3 3 29.7-30.3 27-34 -2.7-3.7-6.3 1.9-9 16 -2.9 15.1-5 43-23.7 43 -5.3 0 1-7.5 7.2-11.6 7.5-4.9 16.5-8.7 28.2-23.1" data-llp-stroke-color="#f7f2ec" data-llp-id="logo-10" data-llp-duration="3000" data-llp-delay="1000" class="a"/><path d="M245 64.3c0 0 14.7-15.7 6.7-25.3 -8-9.7-27.3-7.7-29.3 17.1 -2 24.9-7.7 67.6-32.3 66.9 -11.3-0.3-4.6-16.1 16.7-1 23 16.3 46.3-18 51.3-36.3 0 0-10.3 33 0 32.7 10.3-0.3 26-38.9 26-38.9s-2.3 27.2-7.3 35.9c8-17 19.3-39.1 27-35.9 7.7 3.2-17.7 28.2-5.7 32.2 0 0 11.7 0.7 21.7-18.3" data-llp-stroke-color="#f7f2ec" data-llp-id="logo-11" data-llp-duration="1500" data-llp-delay="4000" class="a"/><path d="M322.7 93.7c0 0 21.3-5.2 19-17 -2.3-12-34.3 17.9-17 30.7 7 5.2 21.7-3.4 23-10.4" data-llp-stroke-color="#f7f2ec" data-llp-id="logo-12" data-llp-duration="600" data-llp-delay="5500" class="a"/><path d="M263.2 72.3c-1 0-1.8-0.8-1.8-1.8 0-1 0.8-2.8 1.8-2.8s1.8 0.8 1.8 1.8c0 1-0.8 1.8-1.8 1.8" data-llp-id="logo-13" data-llp-stroke-color="#f7f2ec" data-llp-duration="600" data-llp-delay="5500" class="a"/><path d="M80.7 131.7c0 0 3.4 19.7 0 48.5 -2.3 20.6-10.9 39.9-15 39.9 -12 0 26.3-101 64.7-91 13.3 3.7 14 49.7-29.7 56.7 -8.3 1.3-7.4-6 0-5.7 0 0 13.7-1.3 28.7 7" data-llp-id="logo-14" data-llp-stroke-color="#f7f2ec" data-llp-duration="600" data-llp-delay="6100" class="a"/><path d="M129.7 201.3c0 0 16.3-18.7 27.7-24.7s0.3-6-3.7-2.5c-4 3.5-22.4 23.8-7.7 32.2 14.7 8.3 24.3-27.4 25-32.2 -7.3 21.2-9 38.8 7.7 18.5l15.3-27.3c0 0-11.7 34-1 34 8.7 0 22.7-24 26.3-36" data-llp-id="logo-15" data-llp-stroke-color="#f7f2ec" data-llp-duration="600" data-llp-delay="6700" class="a"/><path d="M218.9 164.6c0 0-2.9 21-5.9 31 7-15.7 22.3-37 25-32.3 2.7 4.7-15.7 27.7-2.3 30.3 13.3 2.7 32.7-49 34-59.3 -5.3 23.7-17.4 54.1-4.5 55.7 6.9 0.8 18.8-13 21.2-19.5" data-llp-id="logo-16" data-llp-stroke-color="#f7f2ec" data-llp-duration="600" data-llp-delay="7300" class="a"/><path d="M194 151.3c0 0 4 2 6-2.3 2-4.3-3-6.7-6-4.7C191 146.3 194 151.3 194 151.3z" data-llp-id="logo-17" data-llp-stroke-color="#f7f2ec" data-llp-duration="600" data-llp-delay="7900" class="a"/><path d="M252.1 159c0 0 13.2-0.7 18.2-2 5-1.3 6.7-1 6.7-1" data-llp-id="logo-18" data-llp-duration="300" data-llp-stroke-color="#f7f2ec" data-llp-delay="8500" class="a"/><path d="M286.7 172.7c0 0 16.3-4 20.7-13.7 4.3-9.7-8-7.1-13.3-1 -5.3 6-16 24-2 27.5 15.7 5.5 33-23.1 33-36.9 0-5.6-6.4-4.9-6.4 0.8 0 5.5 3.1 4.3 9.8 4.3 6.7 0 11.3 5.3 6.3 10.7s-10.8 12.5-3.3 16.7c8 4.5 12-9 12-9" data-llp-stroke-color="#f7f2ec" data-llp-id="logo-19" data-llp-duration="600" data-llp-delay="8800" class="a"/><path d="M27 96.5c-1.8-2.1-5.1-5.3-10.1-6.3" data-llp-id="logo-20" data-llp-stroke-color="#b5287b" data-llp-duration="400" data-llp-delay="2000" data-llp-stroke-width="2.3" /><path d="M34.9 89.6c0 0-7.4-5.8-10.1-7.2" data-llp-id="logo-21" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="2400" class="a"/><path d="M71.1 69.2c-1.8 4.2-3.3 11-1 16.8" data-llp-id="logo-22" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="2800" class="a"/><path d="M78.8 76.9c0 0 1.5-13.6 10.2-18.9" data-llp-id="logo-23" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="3200" class="a"/><path d="M93.3 80c-1.1 3.5-1.1 8 1.9 9.7" data-llp-id="logo-24" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="3600" class="a"/><path d="M123 82.2c0 0 5.8 13.8-8.5 21.8" data-llp-id="logo-25" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="4000" class="a"/><path d="M159 62.7c0 0-5.5 8-0.7 15" data-llp-id="logo-26" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="4400" class="a"/><path d="M175.9 70c0 0-0.1 18.8-15.1 27.8" data-llp-id="logo-27" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="4800" class="a"/><path d="M189.5 44.5l-1.5 5.2c-1.3 6.2-3.2 16-3.2 16S184 78.5 181 87.1" data-llp-id="logo-28" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="5200" class="a"/><path d="M189.5 119.8c0 0 3.7-0.2 6.5 1 2.6 1.1 6.5 4.5 6.5 4.5" data-llp-id="logo-29" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="5400" class="a"/><path d="M200.5 112.8c3.4 1.3 8 4.5 10.9 6.3" data-llp-id="logo-30" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="5600" class="a"/><path d="M249.5 102c-0.8 4.2-1.8 10-0.3 14.4" data-llp-id="logo-31" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="5800" class="a"/><path d="M276.1 99.3c0 0-0.8 9.4-5.3 18.3" data-llp-id="logo-32" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="6000" class="a"/><path d="M283.8 92.1c0 0 2.9-7.2 7.5-11.9" data-llp-id="logo-33" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="6200" class="a"/><path d="M315.8 96.5c0 0-0.8 7.3 2.5 11.9" data-llp-id="logo-34" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="6400" class="a"/><path d="M331.2 84.7c0 0-7.7 6-6.5 14.4" data-llp-id="logo-35" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="6600" class="a"/><path d="M74.9 167.6c3.8-6.2 13.2-20.1 14.9-22.3" data-llp-id="logo-36" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="6800" class="a"/><path d="M89.6 162.9c-5.9 8.7-15.5 24.2-22.1 50" data-llp-id="logo-37" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="7000" class="a"/><path d="M115.5 186.7c0 0-6.5-2.6-13.6-2.5" data-llp-id="logo-38" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="7200" class="a"/><path d="M113.9 176.1c0 0 9.5 2.7 12.5 3.9" data-llp-id="logo-39" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="7600" class="a"/><path d="M139.2 184.6c-2.8 5.2-4.2 12.7-2.7 18.6" data-llp-id="logo-40" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="7800" class="a"/><path d="M145.5 196.2c0.8-8 3.9-13.2 10-18.2" data-llp-id="logo-41" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8000" class="a"/><path d="M166.7 206.5c-2-0.4-6.3-3.5-4.7-9" data-llp-id="logo-42" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8200" class="a"/><path d="M186 184.1c0 0-3 7.7-1.7 13" data-llp-id="logo-43" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8400" class="a"/><path d="M211.1 181c0.4 2.5-0.3 8.2-2.3 12" data-llp-id="logo-44" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8500" class="a"/><path d="M219.3 177.2c0 0 7.3-13 11.8-17.2" data-llp-id="logo-45" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8600" class="a"/><path d="M257.3 153.7c4.2-0.1 9.3-1.1 13.5-1.8" data-llp-id="logo-46" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8700" class="a"/><path d="M255.4 174.2c0 0-1.4 11.1 1.3 15.8" data-llp-id="logo-47" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8800" class="a"/><path d="M254.5 163.8c0 0 5.2-0.2 12.8-1.2" data-llp-id="logo-48" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8900" class="a"/><path d="M281.5 175.2c0 0-1 8.7 2 11" data-llp-id="logo-49" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="9000" class="a"/><path d="M290.2 178c0 0-0.6-8.2 5.8-14.8" data-llp-id="logo-50" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="9100" class="a"/><path d="M318 157.8c0 0 4.1 1.1 9.8 0.8" data-llp-id="logo-51" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="9200" class="a"/><path d="M322 146c0 0 1.1 2.8 8.8 2.8" data-llp-id="logo-52" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="9300" class="a"/></svg>
		    </div>
	    </div>

        <div id="range-slider" class="range-slider">
		    <input id="input-range" class="input-range" type="range" value="0.5" min="0" max="1" step="0.00001">
		</div>

    </body>
</html>
